<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <script th:src="@{/script/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/script/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="container-fluid center-block" style="width: 1000px;height: 1080px">
    <div class="row" style="height: 500px;margin: 150px 0 0 0">
        <button type="button" class="btn btn-primary">添加商品</button>
        <button type="button" class="btn btn-danger">批量删除</button>
        学生id:<input type="text" id="id" name="id" th:value="${id}" style="width: 100px">
        学生姓名:<input type="text" id="name" name="name" th:value="${name}" style="width: 100px">
        学生年龄:<input type="text" id="age" name="age" th:value="${age}" style="width: 100px">
        <table class="table table-hover">
            <thead>
            <tr>
                <td>
                    <label>
                        <input type="checkbox" class="checkAll"/>
                    </label>
                    全选/全消
                </td>
                <td>学生ID</td>
                <td>学生姓名</td>
                <td>学生年龄</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="User : ${user.list}">
                <td><input type="checkbox" name="subcheck" th:value="${User.id}"/></td>
                <td th:text="${User.id}" name="uid">Onions</td>
                <td th:text="${User.name}" name="uanme"></td>
                <td th:text="${User.age}" age="uage"></td>
                <td>
                    <button th:onclick="'javascript:updateGoods(\''+${User.id}+'\');'">编辑</button>
                    <button th:onclick="'javascript:deleteGoods(\''+${User.id}+'\');'">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="6"><span> 跳转到第 <input type="text" id="pageNum" name="pageNum"
                                                   th:onchange="'gotoPage(this.value)'">页</span>
                    <span>总计 <span th:text="${user.getPages()}"></span>页</span>
                    <span>当前第 <span th:text="${user.pageNum}"></span>页</span>
                    <span>  <button th:onclick="'javascript:gotoPage(\''+1+'\');'">首页</button> </span>
                    <button th:onclick="'javascript:gotoPage(\''+${user.prePage}+'\');'" name="prePage">上一页</button>
                    <button th:onclick="'javascript:gotoPage(\''+${user.nextPage}+'\');'" name="nextPage">下一页</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>

    // function gotoPage(pageNum) {
    //     if (!isNaN(pageNum)) {
    //         window.location.href = "/?name="+$("#name").val()+"&pageNum="+pageNum;
    //     }else {
    //         alert("请输入合法的数字")
    //     }
    // }
    function gotoPage(pageNum) {
        $.ajax({
            type: "get",
            contentType: "text",
            url: "/?name=" + $("#name").val() + "&pageNum=" + pageNum + "&pageSize=5&id=" + $("#id").val() + "&age=" + $("#age").val(),
            cache: false,
            async: true,
            data: {},
            success: function (data) {
                console.log(data)
                $('#uid').text(data.id);
                $('#name').text(data.name);
                $('#age').text(data.age);
            }
        })
    }
</script>
</body>
</html>